<template>
  <el-dialog
    v-el-drag-dialog
    :title="!dataForm.id ? '详情' : '详情'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="130px">
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="订单号：">
            <span>{{dataForm.orderNo}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="消费者账号：">
            <span>{{dataForm.payName}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="消费者名称：">
            <span>{{dataForm.payTrueName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="消费者类型：">
            <span>{{dataForm.payUserType}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="订单商品：">
            <span>{{dataForm.goodNames}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="订单类型：">
            <el-select v-model="dataForm.orderStatus" placeholder="订单类型">
              <el-option
              v-for="item in dataForm.orderStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              disabled>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="订单总金额：">
            <span>{{dataForm.totalMoney}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="返现金券：">
            <span>{{dataForm.commission}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="商品数量：">
            <span>{{dataForm.goodsCount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="订单运费：">
            <span>{{dataForm.deliverMoney}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="订单备注：">
            <span>{{dataForm.orderRemarks}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="下单时间：">
            <span>{{dataForm.createTime}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="是否支付：">
            <span>{{dataForm.isPay}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="付款方式：">
            <span>{{dataForm.payType}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="支付方式：">
            <span>{{dataForm.payFrom}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="微信/支付宝流水号：">
            <span>{{dataForm.orderUnique}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="订单来源：">
            <span>{{dataForm.orderSrc}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="订单地址：">
            <span>{{dataForm.addressText}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="在线支付流水号：">
            <span>{{dataForm.tradeNo}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="商家确认日期：">
            <span>{{dataForm.confirmTime}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="商品完成日期：">
            <span>{{dataForm.successTime}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="商家名称：">
            <span>{{dataForm.storeName}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="商家联系方式：">
            <span>{{dataForm.storeIphone}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="商家logo：">
            <img v-bind:src="this.dataForm.storeimage" width="120px" height="80px"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="配送方式：">
            <span>{{dataForm.distributionType}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="支付编号：">
            <span>{{dataForm.orderUnique}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dialogImageUrl: '',
        dialogVisible: false,
        dataForm: {
          orderNo: '',
          payName: '',
          payTrueName: '',
          payUserType: '',
          orderStatus: '',
          totalMoney: '',
          commission: '',
          goodsCount: '',
          deliverMoney: '',
          orderRemarks: '',
          createTime: '',
          orderSrc: '',
          orderUnique: '',
          isPay: '',
          payType: '',
          payFrom: '',
          addressText: '',
          tradeNo: '',
          confirmTime: '',
          successTime: '',
          storeName: '',
          storeIphone: '',
          distributionType: '',
          goodNames: '',
          storeImage: [],
          storeimage: '',
          orderStatusOptions: [{
            value: '0',
            label: '待确认'
          }, {
            value: '1',
            label: '商家已确认'
          }, {
            value: '2',
            label: '交易完成'
          }, {
            value: '3',
            label: '预约拒绝'
          }, {
            value: '4',
            label: '预约失效'
          }, {
            value: '5',
            label: '未预约'
          }, {
            value: '6',
            label: '已过期'
          }, {
            value: '7',
            label: '退货订单'
          }]
        },
        dataRule: {
          orderNo: []
        }
      }
    },
    methods: {
      // 图片预览
      handlePreview (file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      init (id, orderType, payNo) {
        debugger
        this.dataForm.orderid = id || 0
        this.visible = true
        this.$nextTick(() => {
          // this.$refs['dataForm'].resetFields()
          if (this.dataForm.orderid) {
            var map = {'id': id, 'payNo': payNo, 'orderType': orderType}
            this.$http({
              url: this.$http.adornUrl(`/business/order/getOrderByIdOrPayNo`),
              method: 'get',
              params: this.$http.adornParams(map, false)
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.orderNo = data.data.orderNo
                this.dataForm.payName = data.data.payName
                this.dataForm.payTrueName = data.data.payTrueName
                this.dataForm.payUserType = data.data.payUserType
                this.dataForm.orderStatus = data.data.orderStatus
                this.dataForm.totalMoney = data.data.totalMoney
                this.dataForm.commission = data.data.commission
                this.dataForm.goodsCount = data.data.goodsCount
                this.dataForm.deliverMoney = data.data.deliverMoney
                this.dataForm.orderRemarks = data.data.orderRemarks
                this.dataForm.createTime = data.data.createTime
                this.dataForm.orderSrc = data.data.orderSrc
                this.dataForm.orderUnique = data.data.orderUnique
                this.dataForm.isPay = data.data.isPay
                this.dataForm.payType = data.data.payType
                this.dataForm.payFrom = data.data.payFrom
                this.dataForm.addressText = data.data.addressText
                this.dataForm.tradeNo = data.data.tradeNo
                this.dataForm.confirmTime = data.data.confirmTime
                this.dataForm.successTime = data.data.successTime
                this.dataForm.storeName = data.data.storeName
                this.dataForm.storeIphone = data.data.storeIphone
                let imgs = data.data.storeImage
                if (imgs != null && imgs.indexOf('/') === -1) {
                  this.dataForm.storeImage.push({name: 'tupian', url: 'http://image.yilianbaihui.cn/consumer/business/' + imgs})
                  this.dataForm.storeimage = 'http://image.yilianbaihui.cn/consumer/business/' + imgs
                }
                if (imgs != null && imgs.indexOf('/') !== -1) {
                  this.dataForm.storeImage.push({name: 'tupian', url: 'http://image.yilianbaihui.cn/consumer/' + imgs})
                  this.dataForm.storeimage = 'http://image.yilianbaihui.cn/consumer/' + imgs
                }
                console.log(this.dataForm.storeImage)
                this.dataForm.distributionType = data.data.distributionType
                this.dataForm.goodNames = data.data.goodNames
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/business/order/${!this.dataForm.orderid ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'orderid': this.dataForm.orderid || undefined,
                'orderno': this.dataForm.orderno,
                'userid': this.dataForm.userid,
                'orderstatus': this.dataForm.orderstatus,
                'totalmoney': this.dataForm.totalmoney,
                'goodscount': this.dataForm.goodscount,
                'delivermoney': this.dataForm.delivermoney,
                'paytype': this.dataForm.paytype,
                'ispay': this.dataForm.ispay,
                'shopid': this.dataForm.shopid,
                'orderremarks': this.dataForm.orderremarks,
                'createtime': this.dataForm.createtime,
                'orderunique': this.dataForm.orderunique,
                'ordersrc': this.dataForm.ordersrc,
                'orderflag': this.dataForm.orderflag,
                'tradeno': this.dataForm.tradeno,
                'payfrom': this.dataForm.payfrom,
                'couponmoney': this.dataForm.couponmoney,
                'confimtime': this.dataForm.confimtime,
                'sucesstime': this.dataForm.sucesstime,
                'buyuserid': this.dataForm.buyuserid,
                'goodsids': this.dataForm.goodsids,
                'storeiphone': this.dataForm.storeiphone,
                'storename': this.dataForm.storename,
                'storeimage': this.dataForm.storeimage,
                'addresstext': this.dataForm.addresstext,
                'marketprice': this.dataForm.marketprice,
                'vipprice': this.dataForm.vipprice,
                'iscommission': this.dataForm.iscommission,
                'commission': this.dataForm.commission,
                'coupons': this.dataForm.coupons,
                'distributiontype': this.dataForm.distributiontype,
                'addressid': this.dataForm.addressid,
                'operationtime': this.dataForm.operationtime,
                'appointmenttime': this.dataForm.appointmenttime,
                'shelvestime': this.dataForm.shelvestime,
                'lngandlat': this.dataForm.lngandlat
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
